<template>
<div class="ecb">
  <div class="goodsList">
    <el-container>
      <el-header>
        <h1>搜索列表</h1>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <div class="div" v-for="(g) in goodsList" :key="g.length">
            <div class="thumbnail">
              <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">
                <img :src="imagesURL + g.picture" width="180" height="180" style="margin-left:-20px" alt />
              </router-link>
              <div class="caption">
                <h5>
                  <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">{{ g.name }}</router-link>
                </h5>
                <p>
                  热销指数：
                  {{ g.star }}⭐
                </p>
                <p>上架日期：{{ g.pubdate }}</p>
                <p style="color:orange">价格：{{ g.price }} 元</p>
              </div>
            </div>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </div>
</div>
  
</template>
<script>
import { reactive, toRefs, onMounted, getCurrentInstance, } from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router'
function goo(state){
axios({
    url: '/selectByName',
    method: 'get',
    params: {
      name: state.name,
    },
  }).then(res => {
    state.goodsList = res.data.data
  });
}

export default {
  inject: ["reload"],
  watch:{
    $route(){
      this.reload();
    }
  },
  setup() {

    
    const state = reactive({
      goodsList: [],
      name:sessionStorage.getItem("sosuo"),
      
    });

    const imagesURL = import.meta.env.VITE_APP_URL + "/images/";
   

    return {
        ...goo(state),
      ...toRefs(state),
      imagesURL,
    }

  },
  data() {
  
    return {
     
    }
  }, mounted() {

  },
  methods: {
    
  },
}
</script>
<style >
.goodsList {
  width: 85%;
  margin: auto;
}
.div {
width: 250px;
	padding: 10px 30px;
    height: 400px;
    /* border: 1px solid blue; */
	background-color: rgb(255, 255, 255);
    float: left;
    margin: 25px;
  /* margin: auto;
  text-align: center;
  padding: 20px;
  float: right; */
}
.div:hover{
  margin-top:22px;
    /* transform:scale(1.05,1.05); */
    /* box-shadow: blue; */
}
</style>